<template>
    <div class="fatherBox1">
        <div class="headerBox">
            <div class="left">
                <img :src="routeLogo" alt=""></img>
                <span>调整路线</span>
            </div>
            <div class="right">
                <el-icon :size="18" @click="close" style="cursor:pointer;">
                    <CloseBold />
                </el-icon>
            </div>
        </div>
        <div class="tipBox">
            <img :src="tipWarning" alt=""></img>
            <span>拖动调整待巡检点位，制定路线</span>
        </div>
        <div class="pointList">
            <div class="top">
                <span class="label">
                    区域
                </span>
                <span class="label">
                    状态
                </span>
            </div>
            <draggable :list="pointList1" animation="300"  @start="onStart"
        @end="onEnd" class="list">
                 <template #item="{ element }" :item-key="element.name">
          <div class="row">
            <span class="label">{{ element.name }}</span>
            <span class="label" :style="{color: element.status == '1' ? '#4DEE8E' :  element.status == '2' ? '#FF9262 ' : element.status == '3' ? '#FF2D2D' : '#fff'}">{{ element.status == '1' ? '已完成' :  element.status == '2' ? '待巡检' : element.status == '3' ? '未巡检' : ''}}</span>
          </div>
        </template>
            </draggable>
        </div>
            <el-button class="subBtn" type="primary" @click="handleSubmit">提交</el-button>

    </div>
</template>

<script setup lang="ts">
import draggable from 'vuedraggable'
import routeLogo from '@/assets/images/patrolRoute/routeLogo.png'
import tipWarning from '@/assets/images/patrolRoute/tipWarning.png'
import { inject, onMounted, ref } from 'vue';
const isShowInfo:any = inject('isShowInfo')
const pointList:any = inject('pointList')
const propData = defineProps(['skipData','drawImage'])
const pointList1 = ref(JSON.parse(JSON.stringify(propData.skipData)))
// 1 已巡检 2 待巡检 3 未巡检 
// const pointList1 = ref(
//     [{
//         name: '4号宿舍楼',
//         maplat: '525',
//         maplon: '490',
//         status: '1',
//         time: '09:12:25',
//         isSelected: false,
//         sort: '1'
//     }, {
//         name: '3号宿舍楼',
//         maplat: '660',
//         maplon: '490',
//         status: '1',
//         time: '09:12:25',
//         isSelected: false,
//         sort: '2'
//     }, {
//         name: '2号宿舍楼',
//         maplat: '790',
//         maplon: '490',
//         status: '2',
//         time: '09:12:25',
//         isSelected: false,
//         sort: '3'
//     }, {
//         name: '1号宿舍楼',
//         maplat: '930',
//         maplon: '490',
//         status: '3',
//         time: '09:12:25',
//         isSelected: false,
//         sort: '4'
//     }, {
//         name: '食堂',
//         maplat: '1090',
//         maplon: '510',
//         status: '3',
//         time: '09:12:25',
//         isSelected: true,
//         sort: '5'
//     }, {
//         name: '体育馆',
//         maplat: '960',
//         maplon: '170',
//         status: '3',
//         time: '09:12:25',
//         isSelected: false,
//         sort: '6'
//     }, {
//         name: '400米标准田径运动场',
//         maplat: '600',
//         maplon: '290',
//         status: '3',
//         time: '09:12:25',
//         isSelected: false,
//         sort: '7'
//     }]
// )
//拖拽开始的事件
const onStart = () => {
  console.log("开始拖拽");
};

//拖拽结束的事件
const onEnd = () => {
  console.log("结束拖拽");
};

// 提交
const handleSubmit = () => {
    // console.log("pointList1",pointList1.value)
    pointList.value = pointList1.value
    propData.drawImage()
    isShowInfo.value = '0'
    console.log("提交");
}
// 关闭
const close = () => {
    isShowInfo.value = '0'
}
onMounted(() => {
    console.log("页面加载完成");
})
</script>

<style lang="scss" scoped>
.fatherBox1 {
    width: 329px;
    margin-top: 10px;
    height: calc(100% - 82px);
    box-sizing: border-box;
    background: rgb(0, 0, 0, 0.5);
    border-radius: 4px;
    padding: 13px 0;
    display: flex;
    flex-direction: column;
    color: #FEFEFE;

    .headerBox {
        padding: 0 19px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: bold;
            font-size: 16px;
            color: #FFFFFF;

            img {
                width: 24px;
                height: 24px;
                margin-right: 5px;

            }
        }
    }

    .tipBox {
        padding: 13px 19px;
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #FFF334;

        img {
            width: 14px;
            height: 14px;
            margin-right: 3px;
        }
    }

    .pointList {
        .top {
            display: flex;
            background-color: rgb(69, 159, 255, 0.5);
            height: 40px;
            justify-content: center;
            align-items: center;

            .label {
                font-weight: bold;
                font-size: 14px;
                color: #FFFFFF;
                width: 50%;
                text-align: center;
            }
        }
        .list {
            display: flex;
            flex-direction: column;
            .row {
            height: 40px;

                display: flex;
                justify-content: space-between;
                align-items: center;
                .label {
                    width: 50%;
                      font-size: 14px;
                color: #FFFFFF;
                text-align: center;

                }
            }
            .row:hover{
                cursor: move;
            }
        }
       
    }
     .subBtn{
            height: 32px;
background: #459FFF;
width: 145px;
margin: 20px  auto 0 auto;
        }
}
</style>